//js获取元素
let a1 = document.querySelector('#a1') //获取元素对象 只能获得第一个
console.log(a1)
let lis1 = document.querySelectorAll('.b1') //获取NodeList 对象集合
                                                     // 伪数组(有长度有索引 无pop/push) 获得匹配所有项
console.log(lis1)
let lis2 = document.querySelectorAll('li') //获取NodeList 对象集合
                                                    // 伪数组(有长度有索引 无pop/push) 获得匹配所有项
for (let i = 0; i < lis2.length; i++) {
    console.log(lis2[i])
}

//修改元素
a1.innerText = '修改文字'
let a2 = document.querySelector('#a2')
a2.innerHTML = ('<h1>修改大标题</h1>')  //添加标签

//修改元素属性
let a3 = document.querySelector('#a3')
a3.src = './p2.png'  //图片路径
a3.style.width = '200px'  //css属性
a3.style.backgroundColor = 'green' //含-的属性 —> 驼峰命名
a2.className = 'b2' //给元素加已定类 !会覆盖原有类
a2.classList.add('b3') //给元素追加已定类 方法：add remove   toggle（有就减，没就减）

//修改表单属性
let a5 = document.querySelector('#a5')
a5.value = '111' //表单改值
a5.type = 'password' //表单改类型
 //checked selected disabled
a5.disabled = true //禁用

//定时器
let a6 = document.querySelector('#a6')
let v1 = 60
setInterval(f1,1000)  //1000毫秒调用一次函数
function f1(){
    if(v1 > 0) {
        v1--
        a6.innerHTML = v1.toString()
    }
}
//延时函数/定时器
let timer = setTimeout(function (){},1) //等待指定秒数执行
clearTimeout(timer)

//图片轮换
let a7 = document.querySelector('#a7')
let a8 = document.querySelector('#a8')
let data1 = [
    {//0
        imaSrc:'p1.png',
        title:'图1'
    },{//1
        imaSrc:'p2.png',
        title:'图2'
    },{//2
        imaSrc:'p3.jpeg',
        title:'图3'
    }
]
let i = 0
timer1 = setInterval(f2,1000)
function f2() {
    a7.src = data1[i].imaSrc
    a8.innerHTML = data1[i].title
    i++
    if(i === 3){
        i = 0
    }
}
// clearInterval(timer1) 停用定时器

//监听
let a9 = document.querySelector('#a9')
a9.addEventListener('click', function (){ //匿名函数
                                                        alert('事件点击监听')}
)
// a9.onclick =  老版本监听事件
//事件： mouseenter鼠标经过 mouseleave鼠标离开 focus获得焦点 blur试求焦点
//keydown 键盘按下 keyup键盘抬起 input用户输入


//函数高级应用
let counter = function (x,y){
    return x+y;
}
//回调函数
// timer1 = setInterval(f2,1000)   f2实为回调函数

// 环境对象this  指向当前环境
function fn(){
    console.log(this) //指向window
}

//排他思想
let b5 = document.querySelectorAll('.b5') //点击变色
for (let j = 0; j < b5.length; j++) {
    b5[j].addEventListener('click',function (){
        //法1:
        for (let k = 0; k < b5.length; k++) {  //影响所有人
            b5[k].classList.remove('pink')
            this.classList.add('pink')  //更改自己状态
        }
        //法2:
        // document.querySelector('.pink').classList.remove('pink')
        // this.classList.add('pink')  //更改自己状态
    })
}


//节点
//  根节点html
//  元素节点
//  属性节点
//  文本节点
let c2 = document.querySelectorAll('#c2')
let c1 = document.querySelectorAll('#c1')
//!? c2.parentNode.style.backgroundColor = 'red'  //找父节点 parentNode
//!? c1.children.style.backgroundColor = 'red'  //找子节点 children找元素子节点 children找所有子节点
//!? c2.nextElementSibling.style.backgroundColor = 'red'  //找下一个兄弟节点
//!? c2.previousElementSibling.style.backgroundColor = 'red'  //找上一个兄弟节点

function f3() {
    let c4 = document.createElement('div')//生成追加节点
    let c5 = c2.cloneNode(true)//克隆节点 true克隆包括后代 false克隆不包括后代
    c4.innerHTML = '追加文字'
    c2.appendChild(c4)//追加节点
    c2.insertBefore(c4)//前面追加节点
    c1.remove(c2)//删除节点 只能父删子
}

//时间对象
let date = new Date('2019.1.1 13:00:00')
let year = date.getFullYear()
c1.innerHTML = '${year}'

c1.innerHTML.trim() //trim取出两侧空格

//div span ul li     标签 设置文字内容 元素.innerText
//表单 input 单选 复选 标签 设置文字内容 表单的value
//button             标签 设置文字内容 通过inner


//事件
let c6 = document.querySelectorAll('#c6')
document.addEventListener('click',function (e){ //e为事件对象
    console.log('------------------------------------------------------')
    console.log('clientX:' + e.clientX, 'clientY' + e.clientY)  //光标相对于浏览器窗口左上角位置
    console.log('pageX:' + e.pageX, 'pageY' + e.pageY) //光标相对于当前页面左上角位置（受滚动影响）
    console.log('offsetX:' + e.offsetX, 'offsetY' + e.offsetY) //光标相对于当前DOM(元素)左上角位置
})

//图标跟随鼠标移动
let p4 = document.querySelector('#c7')
document.addEventListener('mousemove',function (e){
    p4.style.left = e.pageX + 8 + 'px'
    p4.style.top = e.pageY + 25 + 'px'
})

let c8 = document.querySelector('#c8')
c8.addEventListener('keyup',function (e){
    if(e.key === 'Enter'){  //e.key 检测按下什么键
        alert('回车')
        //按钮.click()
    }
})
//事件流
//  捕获阶段 Document -> Element html ->Element body ->Element div
//  冒泡阶段 Element div -> Element body -> Element html -> Document
// 事件冒泡 当元素触发 依次向上调用所有父级元素的同名事件
// DOM.addEventListener(事件类型,事件处理函数,是否使用捕获true false)   实为切换捕获/冒泡模式
//e.stopPropagation() 阻止事件流动
//mouseover mouseout 有冒泡效果
//mouseenter mouseleave 没有冒泡效果
//e.preventDefault() 阻止默认行为(连接不跳转，表单不提交···)

//事件监听注册事件：
// 后一个不会覆盖前一个
//必须使用 removeEventListener去除事件 匿名函数无法解绑
let c9 = document.querySelector('#c9')
c9.addEventListener('click',function (){

})
c9.addEventListener('click',function (){

})

//事件委托实为给父级添加事件实现子级目的
let d1 = document.querySelector('#d1')
d1.addEventListener('click',function (e){
console.log(e.target)//真正触发事件的元素! e.target.tagName
    e.target.style.color = 'red'
})


//手风琴效果 鼠标经过展开图片
let d2 = document.querySelectorAll('#d2')
let b7 = document.querySelectorAll('.b7')
for (let j = 0; j < b7.length; j++) {
    b7[j].addEventListener('mouseenter',function (){
        for (let k = 0; k < b7.length; k++) {
            b7[k].style.width = '100px'
        }
        this.style.width = '900px'
        this.style.backgroundColor = 'aquamarine'
    })
    b7[j].addEventListener('mouseleave',function (){
        for (let k = 0; k < b7.length; k++) {
            b7[k].style.width = '300px'
        }
    })
}



//加载事件
document.addEventListener('DOMContentLoaded',function (){})
window.addEventListener('load',function (){})


//页面滚动事件
let b8 = document.querySelectorAll('#b8')
// b8.addEventListener('scroll',function (){  //当滚动时添加监听
//     // scroll家族
//     b8.scrollWidth  //宽高和内容有关
//     b8.scrollHeight //宽高和内容有关
//     b8.scrollTop   //获取元素滚出去看不到的距离 可赋值
//     b8.scrollLeft   //获取元素滚出去看不到的距离 可赋值
//
//     //offset家族
//     b8.offsetWidth   //宽高和盒子/padding/border有关
//     b8.offsetHeight  //宽高和盒子/padding/border有关
//     b8.offsetTop     //与具有定位的父亲的距离 没有再往上找 不可赋值  //用作盒子距顶部距离测算
//     b8.offsetLeft    //与具有定位的父亲的距离 没有再往上找 不可赋值
//
//     //client家族
//     b8.clientWidth   //可视区域宽高 不包含border
//     b8.clientHeight  //可视区域宽高 不包含border
//     b8.clientTop     //边框宽度
//     b8.clientLeft    //边框宽度
// })
window.addEventListener('scroll',function (){  //当滚动时添加监听
    document.documentElement //所有文档
    // scroll家族
    document.documentElement.scrollTop  //所有元素滚动多少
})


//窗口重置事件
window.addEventListener('resize',function (){
    document.documentElement.clientWidth //屏幕宽度
})


//js流程
//同步任务（任务栈） 全部执行完 执行异步任务
//异步任务：
//  普通事件 click resize
//  资源加载 load error
//  定时器 setInterval setTimeout


//（DOM文档对象模型）
//BOM浏览器对象模型 window

//location
// location.href //拿到当前html页面url地址
// location.href = '#' //用于跳转
// location.search //拿到跳转过来时url ?后附带的数据
// location.hash   //拿到跳转过来时url #后附带的数据
// location.reload() //刷新当前页面
//navigator
if((navigator.userAgent.match(/(phone | pad | iPhone)/i))){ //识别浏览器终端
    window.location.href = '';
}
//history
// history.back()    //页面后退
// history.forward() //页面前进
// history.go()      //页面前进后退


//本地存储 存储到浏览器当中永久有效
localStorage.setItem('key1','1')
console.log(localStorage.getItem('key1'))
localStorage.removeItem('key1')
//存储复杂数据类型
let obj = {
    username: '李',
    age: 11
}
objj = JSON.stringify(obj)  //复杂数据转化为JSON  存入
localStorage.setItem('obj',objj)
objjj = JSON.parse(objj) //将JSON转为对象  取出
console.log(objj)
console.log(objjj)


//正则表达式
//  检测是否包含某字符串
let reg = /前端/
let str = '在学前端'
console.log(str) //true
//  检测是否包含某字符串
console.log(reg.exec(str)) //数组：  [前端', index: 2, input: '在学前端', groups: undefined]
//元字符
// [a-z]
// ^表示文本以谁开始
// $表示文本以谁结尾
//{n,m}重复n-m次
//[abc] 匹配其中一个字符就true
